<template>
    <div class="app-layout" ref="editor">
        <div class="header">
            <AppHeader />
        </div>
        <div class="content">
            <div class="modules">
                <AppModules />
            </div>
            <transition name="fade">
                <div
                    class="resources"
                    v-show="appStore.activeModule"
                    :style="{
                        '--width': rWidth + 'px',
                    }"
                >
                    <AppResources />
                    <el-tooltip
                        effect="dark"
                        content="关闭侧边栏"
                        placement="right"
                    >
                        <img
                            src="@/assets/svg/module-close.svg"
                            class="close"
                            @click="close()"
                        />
                    </el-tooltip>
                </div>
            </transition>
            <div class="workspace">
                <AppWorkspace />
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed } from "vue";
import AppHeader from "./header/index.vue";
import AppModules from "./modules/index.vue";
import AppResources from "./resources/index.vue";
import AppWorkspace from "./workspace/index.vue";
import { useAppStore } from "@/store/modules/app";
const appStore = useAppStore();

const rWidth = computed(() => {
    return appStore.activeModule ? 240 : 0;
});
const close = () => {
    appStore.setModule("");
};
</script>
<style scoped lang="scss">
.app-layout {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    .header {
        height: 60px;
        box-sizing: border-box;
        border-bottom: 1px solid var(--border-color-light);
    }
    .content {
        display: flex;
        height: calc(100% - 60px);
        position: relative;
        justify-content: space-between;
        .modules {
            width: 60px;
            height: 100%;
            border-right: 1px solid var(--border-color-light);
        }
        .resources {
            width: var(--width);
            z-index: 2;
            height: 100%;
            border-right: 1px solid var(--border-color-light);
            transition: width 0.25s ease;
            position: relative;
            .close {
                position: absolute;
                top: 50%;
                right: -1px;
                z-index: 1;
                cursor: pointer;
                transform: translate(calc(100% - 3px), -50%);
            }
        }

        .workspace {
            flex: 1;
            background: var(--background-color-gray);
            z-index: 1;
            padding: 15px;
            position: relative;
        }
    }
}
</style>